<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>供应商评级管理 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>

<!-- Main Content -->
<main class="container mx-auto my-8">
    <!-- Search -->
    <form th:action="@{/manager/supplier/rating}" method="get" class="flex flex-wrap items-center gap-4 mb-6">

        <!-- 搜索框 -->
        <div class="relative w-64">
            <input type="text" name="search" th:value="${search}" placeholder="搜索供应商…"
                   class="pl-3 pr-9 py-2 rounded-full text-sm text-gray-800 border border-gray-300 w-full
                      focus:outline-none focus:ring-2 focus:ring-blue-300 transition" />
            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 21l-5-5m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </button>
        </div>

        <!-- 重置按钮 -->
        <a th:href="@{/manager/supplier/rating}"
           class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition">
            <i class="fas fa-redo mr-2"></i> 重置
        </a>
    </form>


    <!-- Supplier Table -->
    <div class="bg-white p-6 rounded shadow">
        <table class="w-full table-auto">
            <thead>
            <tr class="border-b bg-gray-200">
                <th class="p-2 text-left">供应商名称</th>
                <th class="p-2 text-left">平均评分</th>
                <th class="p-2 text-left">审核状态</th>
                <th class="p-2 text-left">资质许可</th>
                <th class="p-2 text-left">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="supplier : ${suppliers}" class="border-b">
                <td class="p-2" th:text="${supplier.company}"></td>
                <td class="p-2" th:text="${#numbers.formatDecimal(supplier.averageRating, 1, 1)}"></td>
                <td class="p-2">
                    <div th:switch="${supplier.auditStatus}">
                        <span th:case="'APPROVED'">通过</span>
                        <span th:case="'REJECTED'">拒绝</span>
                        <span th:case="'PENDING'">待审核</span>
                        <span th:case="*">未知状态</span>
                    </div>
                </td>
                <td class="p-2">
                    <a th:if="${supplier.licenseUrl}" th:href="${supplier.licenseUrl}" target="_blank" class="text-blue-600 hover:text-blue-800">查看</a>
                    <span th:unless="${supplier.licenseUrl}" class="text-gray-500">未上传</span>
                </td>
                <td class="p-2">
                    <button type="button" th:onclick="'showAuditModal(' + ${supplier.userId} + ')'" class="action-btn text-blue-600 hover:text-blue-800">审核</button>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(suppliers)}">
                <td colspan="5" class="p-2 text-center text-gray-500">暂无供应商</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="flex flex-col items-center mt-6 space-y-3">
        <div class="text-gray-700">
            <span>共 <span th:text="${totalItems}"></span> 个供应商</span>
        </div>
        <div class="flex justify-center space-x-2">
            <a th:href="@{/manager/supplier/rating(page=${currentPage - 1}, search=${search})}"
               th:classappend="${currentPage == 1} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
               th:attr="disabled=${currentPage == 1} ? 'disabled' : null">上一页</a>
            <div class="flex space-x-1">
                <a th:each="i : ${#numbers.sequence(1, totalPages)}"
                   th:href="@{/manager/supplier/rating(page=${i}, search=${search})}"
                   th:classappend="${i == currentPage} ? 'bg-blue-600 text-white px-3 py-1 rounded' : 'bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-blue-200'"
                   th:text="${i}"></a>
            </div>
            <a th:href="@{/manager/supplier/rating(page=${currentPage + 1}, search=${search})}"
               th:classappend="${currentPage == totalPages} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
               th:attr="disabled=${currentPage == totalPages} ? 'disabled' : null">下一页</a>
        </div>
    </div>

    <!-- Audit Modal -->
    <div id="auditModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center">
        <div class="bg-white p-6 rounded shadow-lg w-1/3">
            <h2 class="text-xl font-bold mb-4">审核供应商资质</h2>
            <form id="auditForm" th:action="@{/manager/supplier/rating/audit}" method="post" th:object="${auditDto}">
                <input type="hidden" name="supplierId" id="supplierId"/>
                <div class="mb-4">
                    <label class="block text-gray-700">资质许可</label>
                    <a id="licenseLink" target="_blank" class="text-blue-600 hover:text-blue-800">查看文件</a>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700">审核状态</label>
                    <select th:field="*{status}" class="border p-2 rounded w-full">
                        <option value="APPROVED">通过</option>
                        <option value="REJECTED">拒绝</option>
                    </select>
                    <div th:if="${#fields.hasErrors('status')}" th:errors="*{status}" class="text-red-600"></div>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700">审核理由</label>
                    <textarea th:field="*{auditComment}" class="w-full border p-2 rounded" rows="4" required></textarea>
                    <div th:if="${#fields.hasErrors('auditComment')}" th:errors="*{auditComment}" class="text-red-600"></div>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeAuditModal()" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">取消</button>
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">提交</button>
                </div>
            </form>
        </div>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script>
    function showAuditModal(supplierId) {
        const modal = document.getElementById('auditModal');
        const form = document.getElementById('auditForm');
        const supplierIdInput = document.getElementById('supplierId');
        const licenseLink = document.getElementById('licenseLink');

        // 查找供应商的 licenseUrl
        const supplierRow = document.querySelector(`tr td button[onclick='showAuditModal(${supplierId})']`).closest('tr');
        const licenseUrl = supplierRow.querySelector('td:nth-child(4) a')?.href || '';

        supplierIdInput.value = supplierId;
        licenseLink.href = licenseUrl || '#';
        licenseLink.textContent = licenseUrl ? '查看文件' : '无文件';
        modal.classList.remove('hidden');

        // 如果有错误，恢复表单状态
        const auditError = document.getElementById('auditError')?.value;
        if (auditError) {
            supplierIdInput.value = document.getElementById('auditErrorSupplierId')?.value || supplierId;
        }
    }

    function closeAuditModal() {
        document.getElementById('auditModal').classList.add('hidden');
        // 清空表单
        const form = document.getElementById('auditForm');
        form.reset();
    }
</script>
<input type="hidden" id="auditError" th:value="${auditError != null ? auditError : ''}"/>
<input type="hidden" id="auditErrorSupplierId" th:value="${supplierId != null ? supplierId : ''}"/>
</body>
</html>